<template>
    <div class="map-comp">
        <div class="left">
            <BMapScatter></BMapScatter>
        </div>
        <div class="right">
            <el-card shadow="hover">
                <template #header>
                    <h2>订单同比增长</h2>
                </template>
                <template #default>
                    <LiquidFill></LiquidFill>
                </template>
            </el-card>
            <el-card shadow="hover">
                <template #header>
                    <h2>热门搜索</h2>
                </template>
                <template #default>
                    <WorkCloud></WorkCloud>
                </template>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import BMapScatter from './BMapScatter.vue';
import LiquidFill from './LiquidFill.vue';
import WorkCloud from './WorkCloud.vue';
</script>

<style lang="scss" scoped>
.map-comp{
    display: flex;
    margin-top: 20px;
    gap: 20px;
    .left{
        flex: 0 0 78%;
        height: 600px;
        //baidu地图需要参考的父级元素
        position: relative;
    }
    .right{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .el-card{
            h2{
                font-weight: 600;
            }
            :deep(.el-card__body){
                height: 227px;
            }
        }
    }
}
</style>